<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.comment{
				width: 86px;
				height: 16px;
				background-color: yellow;
				background-image: url(image/commentsListIcons1.png);
				float: left;
				margin-right: 10px;
			}
			.star{
				display: block;
				height: 16px;
				width: 16px;
				float: left;
				margin-right: 1px;
			}
			.start:last-child{
				margin: 0px;
			}
			.star0{
				background-position: -83px 0px;
			}
			.star1{
				background-position: -67px 0px;
			}
			.star2{
				background-position: -51px 0px;
			}
			.star3{
				background-position: -34px 0px;
			}
			.star4{
				background-position: -17px 0px;
			}
			.star5{
				background-position: -0px 0px;
			}
		</style>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<div class="comment star0" value="0">
			<span class="star"></span>
			<span class="star"></span>
			<span class="star"></span>
			<span class="star"></span>
			<span class="star"></span>
		</div>
		<span class="number">0分</span>
		<script type="text/javascript">
			$(".comment span").hover(function(){
				var index = $(this).index();
				if(index>=0){
					$(".number").text((index+1)+"分");
				}
				$(this).parent("div").attr("class","comment").addClass("star"+(index+1));
			});
			
			$(".comment span").click(function(){
				var index = $(this).index();
				$(this).parent("div").val(1);
			});
			
			$(".comment").mouseout(function(){
				if($(this).val()>0)
					return ;
				$(this).attr("class","comment star0");
				$(".number").text("0分");
			});
		</script>
	</body>
</html>
